<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>View Article</title>
</head>
<body>
	<div id="dialog-deletion" title="Confirm deletion">
	  <p>Are you sure?</p>
	</div>
	<div id="container">
		<h1 id="article_title">View Article</h1>
		<div id="article_content"></div>
		<h2>Attention Stats</h2>
		<table>
			<tbody>
				<tr>
					<td id="positive_attention_text" style="width: 200px; ">positive: <span id="positive_attention">0</span></td>
					<td id="negative_attention_text" style="width: 200px; ">negative: <span id="negative_attention">0</span></td>
					<td id="article_total_td" style="width: 200px; ">total: <span id="article_total_span">0</span></td>
				</tr>
			</tbody>
		</table>
		
		<h2>Comments</h2>
		<table style="width: 100%">
			<tbody>
				<tr>
					<td id="order_type">
						<a href="javascript:void(0)" id="latest">latest</a>|
						<a href="javascript:void(0)" id="oldest">oldest</a>|
						<a href="javascript:void(0)" id="top_positive">top positive</a>|
						<a href="javascript:void(0)" id="top_negative">top negative</a>|
						<a href="javascript:void(0)" id="most_supported">most supported</a>|
						<a href="javascript:void(0)" id="most_disliked">most disliked</a>|
						<a href="javascript:void(0)" id="most_popular">most popular</a>
					</td>
				</tr>
			</tbody>
		</table>
		<div class="add_comment add_subcomment edit_comment" id="edit_comment_template">
			<textarea maxlength="512" id="edit_comment" class="textarea padded"></textarea>
			<input type="radio" id="radio1" name="radio" value="positive"/><label for="radio1">Positive</label>
			<input type="radio" id="radio2" name="radio" value="neutral"/><label for="radio2">Neutral</label>
			<input type="radio" id="radio3" name="radio" value="negative"/><label for="radio3">Negative</label>
			<input type="submit" name="post" value="Done" class="submit" style="position: static;">
		</div>
		<div id="comment_template" style="display: none;">
			
			<table style="width: 100%; border: 1px solid #EFF2F8; margin-top: 10px">
				<tbody>
					<tr>
						<td colspan="2">
							<table style="width: 100%; padding: 0px; margin: 0px">
								<tbody>
									<tr>
										<td id="comment_eval" style="width: 10px; text-align: center"></td>
										<td id="commenter_name" style="font-weight: bold"></td>
										<td id="comment_edit" style="width: 80px; display:none;">
											<a href="javascript:void(0);">edit</a>
											<a href="javascript:void(0);">delete</a>
										</td>
										<td id="comment_in_reply_to" style="width: 151px; display:none; font-size: smaller;">
											In reply to <a href="javascript:void(0);" id="comment_in_reply_to_name">name</a>
										</td>
									</tr>
								</tbody>
							</table>
						</td>
						<td rowspan="2" style="width: 146px; vertical-align: top; 
								padding-left: 5px; padding-right: 8px; 
								border-left: 1px solid #EFF2F8;" id="evaluations">
							<span id="positive_attention_text">positive:&nbsp;<span id="positive_attention">0</span></span><br/>
							<span id="negative_attention_text">negative:&nbsp;<span id="negative_attention">0</span></span>
							comments:&nbsp;<span id="total_attention">0</span><br/>
						</td>
						<td rowspan="2" style="width: 120px; vertical-align: top;">
							<a href="javascript:void(0);" id="positive_opinion_button" style="background-color: #7BD580">support</a><br/>
							<a href="javascript:void(0);" id="negative_opinion_button" style="background-color: #F78A8A">dislike</a><br/>
							<a href="javascript:void(0);" id="neutral_opinion_button" style="background-color: #FFFF91">neutral&nbsp;comment</a>
						</td>
					</tr>
					<tr>
						<td id="comment" colspan="2" style="white-space: pre-line;"></td>
					</tr>
					<tr>
						<td style="width: 32px;"></td>
						<td id="sub_comments" style="margin-bottom: 0px" colspan="3">
							<div class="add_comment add_subcomment" id="comment_form">
								<textarea maxlength="512" id="article_comment" class="textarea padded"></textarea>
								<small id="optional_comment">Comment is optional</small>
								<input type="submit" name="post" value="Post" class="submit">
							</div>
						</td>
					</tr>
					<tr>
						<td style="width: 32px;"></td>
						<td style="margin-bottom: 0px" colspan="3"><a id="show_more_comments_a" href="javascript:void(0);">more comments (<span id="show_more_comments_count">0</span>)</a></td>
					</tr>
				</tbody>
			</table>
		</div>
		<div id="article_comments" style="padding: 0px; margin: 0px;">
			
		</div>
		<p style="text-align: center">
		<a href="javascript:showMoreComments();" id="show_more_comments_a">
			Show more comments (<span id="num_comments_left">0</span>&nbsp;left)
		</a>
		</p>
		<div class="add_comment" id="add_main_comment">
		<h2>Your opinion</h2>
		<textarea name="article_comment" maxlength="512" id="article_comment" class="textarea padded"></textarea>
		<input type="submit" name="support" value="Support" class="submit">
		<input type="submit" name="dislike" value="Dislike" class="submit">
		<input type="submit" name="neutral" value="Neutral" class="submit">
		</div>
	</div>
</body>
</html>